<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { MessageType } from '@/types/enum/message'
import { extractCodeBlocks } from '@/utils/common'
import mdHTML from './mdHTML.vue'
// TODO: 为gpt的对话框增添重新发送请求+朗读文字等功能
// TODO: 添加代码转换为流程图的功能
// 对话框组件
defineOptions({
  name: 'message-box'
})
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  type: {
    default: MessageType.User
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  isMicroFunctionRender: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: 'flowChart'
  },
  feedback: {
    type: String,
    default: '测试反馈'
  },
  chat_id: {
    type: Number,
    default: 0
  },
  isCouleBeReview: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['playSound', 'copyContent', 'pardon'])

const code = computed(() => extractCodeBlocks(props.text))

const flowChartRef = ref()
const flowChartDetailRef = ref()
watch(
  () => {
    code.value
    // props.text
  },
  (oldValue, newValue) => {
    if (oldValue === newValue) {
      flowChartRef.value?.handleDrawFlowChart()
      flowChartDetailRef.value?.handleDrawFlowChart()
    }
  }
)

const score_value = ref()

const review_value = ref(props.feedback)

const dialogVisible = ref(false)

const dialogRef = ref()

const handleOpenGraphDialog = () => {
  dialogVisible.value = true
}

// 控制对话编辑
const isEditing = ref(false)

const handleEdit = () => {
  isEditing.value = !isEditing.value
}
const handleSumbit = () => {
  isEditing.value = !isEditing.value
}
</script>

<template>
  <div class="message-box__codeMiao" v-if="props.type === MessageType.System">
    <!-- 头像框 -->
    <section class="message-box__avater">
      <img src="@/assets/images/codeMiao_avater.png" />
    </section>
    <!-- 文本框 -->
    <section class="message-box__content">
      <section class="message-box__content__name">
        {{ props.name }}
      </section>
      <section class="message-box__content__text" v-if="!props.isLoading">
        <md-HTML :text="props.text"></md-HTML>
      </section>
      <section class="message-box__content__text_isLoading" v-else>
        <div class="loader-dot"></div>
      </section>
      <!-- 小功能按钮 -->
      <section class="message-box__content__button">
        <icon-button content="朗读" @click="emits('playSound')">
          <VideoPlay />
        </icon-button>
        <icon-button content="复制" @click="emits('copyContent', props.text)">
          <CopyDocument />
        </icon-button>
        <icon-button v-if="props.isMicroFunctionRender" content="重新提问" @click="emits('pardon')">
          <Refresh />
        </icon-button>
      </section>
      <!-- 打分和评价功能 -->
      <div class="message-box__content__review" v-if="props.isCouleBeReview">
        <section class="message-box__review">
          <el-text type="info"
            ><el-icon><Star /></el-icon>&nbsp;你听懂了吗？</el-text
          >
          <el-rate v-model="score_value"></el-rate>
        </section>
        <el-text type="info" style="margin-left: 10px; margin-bottom: 10px"
          ><el-icon><ChatSquare /></el-icon>&nbsp;我的反馈</el-text
        >
        <el-input
          v-if="isEditing"
          v-model="review_value"
          :autosize="{ minRows: 1, maxRows: 5 }"
          style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px"
          type="textarea"
          placeholder="哪里不懂呢?请输入你的想法。"
        />
        <div v-else style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px">
          <el-text type="success">Reply:&nbsp;</el-text><el-text>{{ review_value }}</el-text>
        </div>
        <el-button v-if="!isEditing" @click="handleEdit" type="primary" style="margin-left: 10px"
          >编辑</el-button
        >
        <el-button v-else type="success" @click="handleSumbit" style="margin-left: 10px"
          >提交</el-button
        >
        <!-- 如果有代码则自动绘制代码流程图 -->
        <section class="message-box__content__code" v-if="props.text.includes('```')">
          <div class="notice">点击可放大!(´ ∀ ` *)</div>
          <flow-chart
            :code="code"
            ref="flowChartRef"
            :id="props.id"
            @click="handleOpenGraphDialog"
          ></flow-chart>
        </section>
      </div>

      <!-- Dialog放大流程图 -->
      <el-dialog v-model="dialogVisible" title="流程图" width="80%" ref="dialogRef">
        <flow-chart :code="code" :id="`${props.id}_detail`" ref="flowChartDetailRef"></flow-chart>
      </el-dialog>
    </section>
  </div>
  <div class="message-box__user" v-if="props.type === MessageType.User">
    <!-- 文本框 -->
    <section class="message-box__content">
      <section class="message-box__content__name">
        {{ props.name }}
      </section>
      <section class="message-box__content__text" v-if="!props.isLoading">
        {{ props.text }}
      </section>
    </section>
    <!-- 头像框 -->
    <section class="message-box__avater">
      <img src="@/assets/images/user_avater.png" />
    </section>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/styles/animation/loading.scss');
.message-box__codeMiao,
.message-box__user {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  max-width: 100%;

  .message-box__avater {
    width: 50px;
    height: 50px;
    // background-color: skyblue;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
      flex-shrink: 0; /*防止被压缩*/
    }
  }
  .message-box__content {
    .message-box__content__name {
      margin-bottom: 10px;
      color: #999999;
      font-size: 12px;
    }
    .message-box__content__text,
    .message-box__content__text_isLoading {
      // overflow: hidden;
      padding: 10px;
      // background-color: #ffffff;
      border-radius: 10px;
      word-break: break-all;
      font-size: 16px;
      max-width: 800px;
    }
    .message-box__content__button {
      display: flex;
      padding-left: 10px;
      margin-top: 20px;
      gap: 15px;
    }
    .message-box__review {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-left: 10px;
      margin-top: 10px;
    }
  }
  .message-box__content__code {
    position: relative;
    margin-top: 10px;
    border-radius: 15px;
    padding: 8px;
    width: 100%;
    height: 500px;
    background-color: #797979;
    overflow-y: auto;
    .notice {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 100;
      text-align: left;
      // margin-left: 20px;
      width: 100%;
      color: #797979;
    }
  }
  .message-box__content__review {
    // display: flex;
    width: 100%;
  }
}

.message-box__user {
  justify-content: flex-end;
  .message-box__content {
    .message-box__content__name {
      text-align: right;
    }
    .message-box__content__text {
      // background-color: #0099ff;
      background-color: var(--primary-color);
      color: #ffffff;
    }
  }
}
.message-box__codeMiao :deep(.el-textarea textarea.el-textarea__inner) {
  border-radius: none;
  box-shadow: none;
  border: none;
  // text-decoration: underline;
  // border-bottom: 1px solid #797979;
  outline: none;
  // background-color: transparent;
}
:deep(.el-textarea) {
  --el-input-border: transparent;
  --el-input-hover-border: transparent;
  --el-input-focus-border-color: transparent;
  --el-input-hover-border-color: transparent;
}
</style>
